<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html</title>
    <script src="static/js/jquery.min.js"></script>
    <!--页面1动态加载js-->
    <script src="static/js/page1.js"></script>
    <!--页面2动态加载js-->
    <script src="static/js/page2.js"></script>

</head>
<script>
    $(function () {
        showpage3();
    });

    function showpage2(){
        $("#table2").css("display", "");
        $("#table1").css("display", "none");
        $("#table3").css("display", "none");
    }

    function showpage1(){
        $("#table1").css("display", "");
        $("#table2").css("display", "none");
        $("#table3").css("display", "none");
    }

    function showpage3(){
        $("#table1").css("display", "none");
        $("#table2").css("display", "none");
        $("#table3").css("display", "");
    }
</script>

<body>
<table id="table_head" width="100%">
    <thead>
    <tr>
        <td width="33%" align='center' style="background:#e7e7e7">
            <input width="50%" type="button" style="background-color: #e7e7e7; color: black;" onclick="showpage1();" value="恭喜"/>
        </td>
        <td width="33%" align='center' style="background:#e7e7e7">
            <input width="50%" type="button" style="background-color: #e7e7e7; color: black;" onclick="showpage2();" value="发财"/>
        </td>
        <td width="36%" align='center' style="background:#e7e7e7">
            <input width="50%" type="button" style="background-color: #e7e7e7; color: black;" onclick="showpage3();" value="旺旺"/>
        </td>
    </tr>
    </thead>
</table>

<!--渲染数据由page1.js完成-->
<table id="table1" width="100%">
    <thead>
        <tr style="background:#0000000A" >
            <th width="30%" align='center'>name</th>
            <th width="30%" align='center'>ask</th>
            <th width="30%" align='center'>bid</th>
            <th width="10%" align='center'>percen</th>
        </tr>
    </thead>
    <tbody id="page1Tbody">
    </tbody>
</table>

<!--渲染数据由page2.js完成-->
<table id="table2" width="100%">
    <thead>
    <tr style="background:#0000000A" >
        <th width="30%" align='center'>name</th>
        <th width="30%" align='center'>ask</th>
        <th width="30%" align='center'>bid</th>
        <th width="10%" align='center'>percen</th>
    </tr>
    </thead>
    <tbody id="page2Tbody">
    </tbody>
</table>

<!--页面和数据在trade.html-->
<div id="table3" width="100%"  height="100%">
    <iframe SRC="trade" width="100%" height="600px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ></iframe>
</div>


</body>
</html>